<%@ page import="cn.labbook.bluetooth.constant.AmmeterConstant" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <base href="<%=basePath%>">
    <title>蓝牙电表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="assets/css/admin/reset.css"/>
    <link rel="stylesheet" type="text/css" href="assets/plugins/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_893379_qj8lfap4ylj.css"/>
</head>
<style>
    /*让徽章上下居中*/
    .layui-badge {
        top: 50%;
        transform: translateY(-50%);
    }
    .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<body>
<div>
    <div class=" clearfix margin-15">
        <div class="layui-col-md12">
            <div class="layui-card-header">
                电表列表
            </div>
            <div class="layui-form layuiadmin-card-header-auto padding-tb-10 layui-card"
                 lay-filter="layadmin-userfront-formlist" id="searchForm">
                <div class="layui-form-item searchDiv" style="margin-bottom: 0">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="text-align: left">房东名称</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="请输入房东名称" autocomplete="off"
                                   class="layui-input" id="userName">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">电表状态</label>
                        <div class="layui-input-block ">
                            <select name="status" id="status">
                                <option value="">请选择</option>
                                <option value=<%=AmmeterConstant.ACTIVATE%>>激活</option>
                                <option value=<%=AmmeterConstant.NOTACTIVATE%>>未激活</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-useradmin" id="search"
                                lay-filter="LAY-user-front-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-tab-content">
                <shiro:hasPermission name="server">
                <div class="layui-btn-div">
                    <button class="layui-btn" id="server">设置费率</button>
                </div>
                </shiro:hasPermission>
                <table class="layui-table" id="payPmList" lay-filter="payPmList"></table>
            </div>
        </div>
    </div>
</div>
<div id="addPmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="editForm" id="editForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th><span class="red">*</span>电表序列号</th>
                <td>
                    <input type="text" name="ammeterId" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="">
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-form-item">
            <div class="submitForm">
                <button class="layui-btn" type="button" lay-submit="" lay-filter="addSubmit" id="cancel2">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancel3" onclick="hideFun()">取消</button>
            </div>
        </div>
    </form>
</div>
<div id="serverPmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="activateForm" id="serverForm">
        <table class="table_all">
            <tbody>
            <%--<tr>--%>
                <%--<th><span class="red">*</span>缴费类型</th>--%>
                <%--<td>--%>
                    <%--<select name="payType" id="adminStatus">--%>
                        <%--<option value="">请选择</option>--%>
                        <%--<option value=<%=AmmeterConstant.payType.QTR%>>季度缴费</option>--%>
                        <%--<option value=<%=AmmeterConstant.payType.HFYEAR%>>半年缴费</option>--%>
                        <%--<option value=<%=AmmeterConstant.payType.YEAR%>>年缴费</option>--%>
                    <%--</select>--%>
                <%--</td>--%>
            <%--</tr>--%>
            <tr>
                <th><span class="red">*</span>服务费率</th>
                <td>
                    <input type="text" name="payPrice" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" id="payPrice">
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-form-item">
            <div class="submitForm">
                <button class="layui-btn" type="button" lay-submit="" lay-filter="serverSubmit" id="cancel4">提交</button>
                <button type="button" class="layui-btn layui-btn-primary" id="cancel5" onclick="hideFun()">取消</button>
            </div>
        </div>
    </form>
</div>
<div id="msgPmDiv" class="divHideLayer">
    <form class="layui-form" lay-filter="msgForm" id="msgForm">
        <table class="table_all">
            <tbody>
            <tr>
                <th>创建时间</th>
                <td>
                    <input type="text" name="createTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th>电表地址</th>
                <td>
                    <input type="text" name="location" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 25%">电表状态</th>
                <td style="width: 75%">
                    <input type="text" name="status" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 25%">最高充值金额</th>
                <td style="width: 75%">
                    <input type="text" name="rechargeAmount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 25%">总度数</th>
                <td style="width: 75%">
                    <input type="text" name="amount" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 25%">余额</th>
                <td style="width: 75%">
                    <input type="text" name="balance" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 25%">上传数据时间</th>
                <td style="width: 75%">
                    <input type="text" name="readingTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 25%">电表服务状态</th>
                <td style="width: 75%">
                    <input type="text" name="serverStatus" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
<%--            <tr>--%>
<%--                <th style="width: 25%">服务到期时间</th>--%>
<%--                <td style="width: 75%">--%>
<%--                    <input type="text" name="serverTime" lay-verify="required" autocomplete="off"--%>
<%--                           class="layui-input layui-form-danger" placeholder="" readonly>--%>
<%--                </td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <th style="width: 25%">是否存在试用期</th>--%>
<%--                <td style="width: 75%">--%>
<%--                    <input type="text" name="tryStatus" lay-verify="required" autocomplete="off"--%>
<%--                           class="layui-input layui-form-danger" placeholder="" readonly>--%>
<%--                </td>--%>
<%--            </tr>--%>
            <tr>
                <th style="width: 25%">是否欠费</th>
                <td style="width: 75%">
                    <input type="text" name="oweStatus" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 25%">电表欠费是否拉闸</th>
                <td style="width: 75%">
                    <input type="text" name="switchStatus" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 25%">电表激活时间</th>
                <td style="width: 75%">
                    <input type="text" name="activateTime" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            <tr>
                <th style="width: 25%">服务费率</th>
                <td style="width: 75%">
                    <input type="text" name="payPrice" lay-verify="required" autocomplete="off"
                           class="layui-input layui-form-danger" placeholder="" readonly>
                </td>
            </tr>
            </tbody>
        </table>
<%--        <div class="layui-form-item">--%>
<%--            <div class="submitForm">--%>
<%--                <button class="layui-btn" type="button" lay-submit="" lay-filter="editSubmit" id="cancell">提交</button>--%>
<%--                <button type="button" class="layui-btn layui-btn-primary" id="cancel" onclick="hideFun()">取消</button>--%>
<%--            </div>--%>
<%--        </div>--%>
    </form>
</div>
<script type="text/html" id="barDemo">
    {{#  if(d.status == <%=AmmeterConstant.NOTACTIVATE%>){ }}
    {{#  } else if(d.status == <%=AmmeterConstant.ACTIVATE%> && d.server_status == <%=AmmeterConstant.serverStatus.EXPIRE%>){ }}
    <a class="btn-white btn-success layui-btn-xs" lay-event="del">关闭电表</a>
    {{#  } }}
    <a class="btn-white btn-success layui-btn-xs" lay-event="msg">详情信息</a>
</script>
</body>
<script src="assets/plugins/Jquery/jquery.min.js"></script>
<script src="assets/plugins/layui/layui.all.js"></script>
<script src="assets/js/common.js"></script>
<script>
    var userId = null;
    $(function () {
        layui.use(['table', 'form', 'laydate'], function () {
            var table = layui.table,
                form = layui.form;
            var data = [
                // {checkbox:true},
                {type: 'numbers', title: '序号'},
                {field: 'ammeterId', title: '电表序列号', sort: false, align: 'center'},
                {
                    field: 'status', title: '电表状态', sort: false, align: 'center', templet: function (d) {
                        if (d.status == <%=AmmeterConstant.ACTIVATE%>) return '<span class="layui-badge layui-bg-blue">激活</span>'
                        else if (d.status == <%=AmmeterConstant.NOTACTIVATE%>) return '<span class="layui-badge">未激活</span>'
                        else return '<span class="layui-badge layui-bg-cyan">未知</span>'
                    }
                },
                {field: 'location', title: '电表地址', sort: false, align: 'center'},
                {field: 'userName', title: '房东', sort: false, align: 'center'},
                {
                    field: 'serverStatus', title: '电表服务状态', sort: false, align: 'center', templet: function (d) {
                        if (d.serverStatus == <%=AmmeterConstant.serverStatus.NOTEXPIRE%>) return '<span class="layui-badge layui-bg-blue">未到期</span>'
                        else if (d.serverStatus == <%=AmmeterConstant.serverStatus.EXPIRE%>) return '<span class="layui-badge layui-bg-red">已到期</span>'
                        else if (d.serverStatus == <%=AmmeterConstant.serverStatus.UPCOMINGEXPIRE%>) return '<span class="layui-badge layui-bg-orange">即将到期</span>'
                        else return '<span class="layui-badge layui-bg-cyan">未知</span>'
                    }
                },
                // {field: 'serverTime', title: '服务到期时间', sort: false, align: 'center'},
                {field: 'activateTime', title: '电表激活时间', sort: false, align: 'center'},
                {title: '操作', sort: false, align: 'center', toolbar: '#barDemo'}
            ];
            table.render(
                renderTable("#payPmList", 'ammeter/adminPage', data)
            );

            table.on('tool(payPmList)', function (obj) {
                var data = obj.data;
                userId = data.userId
                if (obj.event === "msg") {
                        layer.open({
                            type: 1,
                            title: "详情",
                            btnAlign: "c",
                            offset: ['25px'],
                            area: ['600px', '800px'],
                            content: $("#msgPmDiv"),
                            success: function () {
                                var msgStatus = msgStatusSet(data.status);
                                var serverStatus = serverStatusSet(data.serverStatus);
                                var switchStatus = switchStatusSet(data.switchStatus);
                                var oweStatus = oweStatusSet(data.oweStatus);
                                var payType = payTypeSet(data.payType);
                                form.val('msgForm', {
                                     "createTime": data.createTime
                                    , "location": data.location
                                    , "status": msgStatus
                                    , "rechargeAmount": data.rechargeAmount
                                    , "amount": data.amount
                                    , "balance": data.balance
                                    , "readingTime": data.readingTime
                                    , "serverStatus": serverStatus
                                    // , "serverTime": data.serverTime
                                    , "tryStatus": data.tryStatus
                                    , "oweStatus": oweStatus
                                    , "switchStatus": switchStatus
                                    , "activateTime": data.activateTime
                                    , "payType": payType
                                    , "payPrice": data.payPrice
                                })
                            },
                            end: function (i) {
                                layer.close(i);
                                hideWithReset("#msgPmDiv", "#msgForm")
                            }
                        });
                }
                if (obj.event === "del") {
                    layer.confirm('确定关闭电表？', function (index) {
                        postAjaxReq("ammeter/notactivate", {"ammeterId": data.ammeterId}, function (res) {
                            if (res.code == 1) {
                                obj.del();
                                layer.msg("操作成功")
                                table.reload('payPmList')
                                userId = null
                            } else {
                                layer.msg(res.msg)
                            }

                        });
                        layer.close(index);
                    })
                }
                if (obj.event === "common") {
                    layer.confirm('确定要更改为普通用户？', function (index) {
                        postAjaxReq("user/common", {"userId": data.userId}, function (res) {
                            if (res.code == 1) {
                                obj.del();
                                layer.msg("操作成功")
                                table.reload('payPmList')
                                userId = null
                            } else {
                                layer.msg(res.msg)
                            }

                        });
                        layer.close(index);
                    })
                }
                if (obj.event === "dealer") {
                    layer.confirm('确定要更改为经销商？', function (index) {
                        postAjaxReq("user/dealer", {"userId": data.userId}, function (res) {
                            if (res.code == 1) {
                                obj.del();
                                layer.msg("操作成功")
                                table.reload('payPmList')
                                userId = null
                            } else {
                                layer.msg(res.msg)
                            }

                        });
                        layer.close(index);
                    })
                }
                if (obj.event === "freeze") {
                    layer.confirm('确定要冻结该用户？', function (index) {
                        postAjaxReq("user/freeze", {"userId": data.userId}, function (res) {
                            if (res.code == 1) {
                                obj.del();
                                layer.msg("操作成功")
                                table.reload('payPmList')
                                userId = null
                            } else {
                                layer.msg(res.msg)
                            }

                        });
                        layer.close(index);
                    })
                }
            });
            form.verify({
                overdueDays: [/^[+]{0,1}(\d+)$/, '逾期天数必须是正整数']
            });
            $("#addPm").click(function () {
                layer.open({
                    type: 1,
                    title: "新增货品信息",
                    btnAlign: "c",
                    offset: ['150px'],
                    area: ['800px', '400px'],
                    content: $("#addPmDiv"),
                    success: function () {

                    },
                    end: function (i) {
                        layer.close(i)
                        hideWithReset("#addPmDiv", "#editForm")
                    }
                });
            })
            form.on('submit(editSubmit)', function (obj) {
                var url = null;
                var data = obj.field
                if (!isEmpty(userId)) {
                    data.userId = userId
                    url = "warehouse/edit"
                } else
                    url = "warehouse/add"
                postAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("保存成功")
                        userId = null
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });
            form.on('submit(addSubmit)', function (obj) {
                var url = "ammeter/add"
                var data = obj.field
                postAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("保存成功")
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });

            $("#server").click(function () {
                // var serverData = table.checkStatus('payPmList').data;

                // if(serverData.length==0){
                //     layer.msg("请选择要设置服务费的电表")
                //     return;
                // }
                // if(serverData.length==1){
                //     console.log(serverData);
                //     $("#payPrice").val(serverData[0].payPrice);
                // }
                layer.open({
                    type: 1,
                    title: "服务费率设置",
                    btnAlign: "c",
                    offset: ['250px'],
                    area: ['400px', '250px'],
                    content: $("#serverPmDiv"),
                    success: function () {

                    },
                    end: function (i) {
                        layer.close(i)
                        hideWithReset("#serverPmDiv", "#serverForm")
                    }
                });
            });
            form.on('submit(serverSubmit)', function (obj) {
                var url = "ammeter/serverSet";
                var data = obj.field;
                // var serverData = table.checkStatus('payPmList').data;
                // data.serverData = JSON.stringify(serverData);
                arrayAjaxReq(url, data, function (res) {
                    if (res.code == 1) {
                        layer.closeAll();
                        table.reload('payPmList');
                        layer.msg("保存成功")
                    } else {
                        layer.msg(res.msg)
                    }
                })
            });

            $("#search").click(function () {
                var userName = $("#userName").val(),
                    status = $("#status").val();

                table.reload('payPmList', {
                    page: {curr: 1},
                    where: {
                        userName: userName,
                        status: status
                    }
                })
            });
        });
    })

       $("#cancel").on("click", function () {
           layer.closeAll()
       });

       function hideFun() {
           layer.closeAll();
           userId = null
       }

       function hideWithReset(hide, reset) {
           $(hide).hide()
           $(reset)[0].reset()
       }
</script>
</body>
</html>
